<template>
<!--  <div class="analysisPage h100">
    <div class="analysisPageLeft h100">
      <div class="analysisPageLeftTop">
        <user-base-info></user-base-info>
      </div>
      <div class="analysisPageLeftMain">
        <update-dynamics-statistics></update-dynamics-statistics>
      </div>
    </div>
    <div class="analysisPageRight h100">
      <common-funcs></common-funcs>
      <my-todo></my-todo>
      <effective-task></effective-task>
    </div>
  </div>-->
  <div style="background-color: #ececec;overflow: scroll" >
    <div class="dashboard-head">
      <dashboard-head @changeTask="changeTask" :task="task"></dashboard-head>
    </div>
    <div  class="dashboard-head">
      <dashboard-main @changeTask="changeTask" :task="task"></dashboard-main>
    </div>
  </div>
</template>

<script>
import UserBaseInfo from './components/UserBaseInfo.vue'
import CommonFuncs from './components/CommonFuncs.vue'
import EffectiveTask from './components/EffectiveTask.vue'
import DashboardMain from './components/DashboardMain.vue'
import DashboardHead from './components/DashboardHead.vue'
import MyTodo from './components/MyTodo.vue'
import UpdateDynamicsStatistics from './components/UpdateDynamicsStatistics'
export default {
  name: 'Analysis',
  components: {
    UserBaseInfo,
    UpdateDynamicsStatistics,
    CommonFuncs,
    EffectiveTask,
    MyTodo,
    DashboardHead,
    DashboardMain
  },
  data () {
    return {
      task: undefined
    }
  },
  created () { },
  methods: {
    changeTask(e){
      this.task = e
    }
  }
}
</script>
<style scoped lang="less">
.analysisPage {
  overflow-y: hidden;
  max-height: 100%;
  display: flex;
  .analysisPageLeft {
    flex:1 0 0;
    min-width: 680px;
    padding:26px 24px;
    padding-bottom: 14px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid @borderColor;
     overflow-y: auto;
    .analysisPageLeftTop {
      flex:none;
      margin-bottom: 32px;
    }
    .analysisPageLeftMain {
      flex:1 0 0;
      position: relative;
      min-height: 300px;
    }
  }
  .analysisPageRight {
    flex:0 0 524px;
    padding:24px;
    overflow-y: auto;
  }
}
.dashboard-head{
  margin: 10px;
}
</style>
<style lang="less">
.analysisPage  {
  .rightCompMainContBox {
    padding:8px 0;
  }
  .bdt {
    border-bottom: 1px solid @borderColor;
  }
  .title3Icon {
    position: absolute;
    right: 5px;
    top:50%;
    transform: translateY(-50%);
    font-size: 1em;
    cursor: pointer;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    color:#999;
    &:hover {
       border-radius: 5px;
    }
  }
}
</style>
